{% extends 'novel_base.html'%}
{% load staticfiles %}
{% block style %}
<style>
    .bs-example:after{
        content:"无良小万";
    }
    .ellips{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
{% endblock %}
{% block title %}目录{% endblock %}
{% block content %}
    {% verbatim cdblock %}
	<div class="container" id="novelcatalogue">
        <div class="bs-callout bs-callout-info">
            <h1 class="page-header" v-cloak>{{ title }}</h1>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="col-xs-4 ellips">作者：</div>
                            <div class="col-xs-8 ellips" v-cloak>{{ author }}</div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="col-xs-4"></div>
                            <div class="col-xs-8"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <div class="col-xs-4 ellips">最后更新：</div>
                            <div class="col-xs-8 ellips" v-cloak>{{updateTime}}</div>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <div class="col-xs-4 ellips">最新章节：</div>
                            <div class="col-xs-7 ellips" v-cloak>{{updateChapter}}</div>
                        </div>
                    </div>
                </div>
                <div class="panel-body" v-cloak>{{abstract}}</div>
                <div class="panel-footer">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="row">
                                <div class="col-xs-12">最近浏览：</div>
                            </div>
                        </div>
                        <hr/>
                        <div class="col-xs-12" v-for="(latelyCatalogue, idx) in localData.latelyList" v-if="latelyCatalogue.title">
                            <div class="row">
                                <div class="col-md-2 col-sm-4 col-xs-12">
                                    书名：
                                </div>
                                <div class="col-xs-1"></div>
                                <div class="col-md-3 col-sm-5 col-xs-10">
                                    <a :href="latelyCatalogue.href" v-cloak>{{ latelyCatalogue.title }}</a>
                                </div>
                                <div class="col-xs-12" v-if="latelyCatalogue.title">
                                    <div class="row">
                                        <div class="col-xs-1"></div>
                                        <div class="col-lg-1 col-md-2 col-sm-6 col-xs-10" >章节：</div>
                                        <div
                                            class="col-lg-2 col-md-3 col-sm-6 col-xs-10 text-right ellips"
                                            v-for="item in latelyCatalogue.latelyCatalogue"
                                        >
                                            <a :href="item.href" v-cloak>{{item.chapter}}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                        </div>
                    </div>
                    <p>以下内容均来自网络</p>
                </div>
            </div>
    {% endverbatim cdblock %}
            <img src="{% static 'imgs/load/loading2.gif' %}" id="load" class="hidden">
    {% verbatim cdblock %}
        </div>
        <table class="table table-condensed table-striped" style="table-layout:fixed">
            <tr v-for="(items, index) in catalogue" class="bs-example">
                <td v-for="(item, idx) in items" class="col-sm-6 col-xs-12 ellips">
                    <a :href="item.href" v-cloak @click="addLatelyCatalogue(index, idx)">{{item.chapter}}</a>
                </td>
            </tr>
        </table>
	</div>
    {% endverbatim cdblock %}
    <span class="hidden">{{catalogue.catalogue}}</span>
    <span class="hidden">{{catalogue.site}}</span>
{% endblock %}

{% block footerscript %}
	<script type="text/javascript" src="{% static 'js/novel/catalogue.js' %}"></script>
{% endblock %}